import Icon from '@/components/icon'
import { getUserProfile } from '@/store/actions/profile'
import { useInitialState } from '@/utils/hooks'
import { NavBar, Input, Toast } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import io, { Socket } from 'socket.io-client'
import { getToken } from '@/utils/storage'
type Message = {
  type: 'user' | 'robot'
  text: string
}

const Chat = () => {
  //获取用户头像
  const { profile } = useInitialState(getUserProfile, 'profile')
  const history = useHistory()
  //1. 先下载 yarn add socket.io-client
  //2.创建io这个实例 io() 参数一是一个服务器地址参数二是一个配置对象{}
  //3.在.env.development配置一个新的基地址 REACT_APP_SOCKET_URL
  //4.发送时需要传一个token
  //4.1 想知道是否连接上了服务器需要注册一个'connect'事件
  //5.关闭连接 client.close()
  //进来就得去发请求不过只需要发送一次请求就能一直连接上

  //如果useRef(null)需要配合ref使用
  //如果希望useRef(null)的值可以直接被修改,泛型上需要|null
  const clientRef = useRef<Socket | null>(null)
  useEffect(() => {
    const client = io(process.env.REACT_APP_SOCKET_URL!, {
      query: {
        token: getToken().token,
      },
      transports: ['websocket'],
    })
    clientRef.current = client
    //连接上了才会触发的回调函数
    client.on('connect', () => {
      console.log('建立连接成功')
      Toast.show({
        icon: 'success',
        content: '连接成功',
      })
    })

    //接收到消息会触发的函数
    client.on('message', e => {
      console.log(e)
      setMessageList(messageList => [...messageList, { type: 'robot', text: e.msg }])
    })

    //断开连接才会触发的事件
    client.on('disconnect', () => {
      console.log('断开连接了')
    })

    //断开连接
    return () => {
      client.close()
    }
  }, [])
  const [messageList, setMessageList] = useState<Message[]>([
    { type: 'user', text: '天王盖地虎' },
    { type: 'robot', text: '小鸡毒蘑菇' },
  ])
  useEffect(() => {
    listRef.current!.scrollTop = listRef.current!.scrollHeight
  }, [messageList])
  //input框的输入状态变化
  const [value, setValue] = useState('')
  const listRef = useRef<HTMLDivElement>(null)
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className='fixed-header' onBack={() => history.go(-1)}>
        小智同學
      </NavBar>

      {/* 聊天记录列表 */}
      <div className='chat-list' ref={listRef}>
        {messageList.map((item, index) => {
          if (item.type === 'user') {
            return (
              <div className='chat-item user' key={index}>
                <img src={profile.photo} alt='' />
                <div className='message'>{item.text}</div>
              </div>
            )
          } else {
            return (
              <div className='chat-item' key={index}>
                <Icon type='iconbtn_xiaozhitongxue' />
                <div className='message'>{item.text}</div>
              </div>
            )
          }
        })}
        {/* 机器人的消息 */}

        {/* 用户的消息 */}
      </div>

      {/* 底部消息输入框 */}
      <div className='input-footer'>
        <Input
          className='no-border input'
          placeholder='請描述您的問題'
          value={value}
          onChange={e => setValue(e)}
          onKeyDown={e => {
            if (e.key === 'Enter' && value) {
              setMessageList([...messageList, { type: 'user', text: value }])
              setValue('')
              clientRef.current?.emit('message', {
                msg: value,
                timestamp: Date.now(),
              })
            }
          }}
        />
        <Icon type='iconbianji' />
      </div>
    </div>
  )
}

export default Chat
